<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记忆力测试 - 小游戏合集</title>
    <link rel="stylesheet" href="../styles/main.css">
    <link rel="stylesheet" href="../styles/game-detail.css">
    <style>
        .memory-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin: 20px 0;
        }

        .memory-card {
            aspect-ratio: 1/1;
            background-color: #4a89dc;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            transform-style: preserve-3d;
        }

        .memory-card.flipped {
            transform: rotateY(180deg);
            background-color: white;
            color: #333;
            border: 2px solid #4a89dc;
        }

        .memory-card.matched {
            background-color: #5cb85c;
            transform: rotateY(180deg);
            cursor: default;
        }

        .score-display {
            font-size: 1.2rem;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <header>
        <h1>小游戏合集</h1>
    </header>

    <main>
        <div class="game-container">
            <div class="game-header">
                <h2 class="game-title">记忆力测试</h2>
                <button class="back-btn" onclick="location.href='../index.html'">返回首页</button>
            </div>

            <div class="game-content">
                <p>找出所有匹配的卡片对！测试你的记忆能力。</p>
                <div class="score-display">
                    <div>尝试次数: <span id="attempts">0</span></div>
                    <div>匹配对数: <span id="matches">0</span></div>
                </div>

                <div class="memory-grid" id="memory-grid"></div>
            </div>

            <div class="game-controls">
                <button id="restart-btn" class="game-btn">重新开始</button>
            </div>
        </div>
    </main>

    <footer>
        <p>&copy; 2023 小游戏合集</p>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const grid = document.getElementById('memory-grid');
            const attemptsEl = document.getElementById('attempts');
            const matchesEl = document.getElementById('matches');
            const restartBtn = document.getElementById('restart-btn');

            const emojis = ['🍎', '🍌', '🍇', '🍊', '🍓', '🍉', '🍒', '🥝'];
            let cards = [];
            let flippedCards = [];
            let matchedCards = 0;
            let attempts = 0;

            // 初始化游戏
            function initGame() {
                // 重置状态
                cards = [];
                flippedCards = [];
                matchedCards = 0;
                attempts = 0;
                attemptsEl.textContent = attempts;
                matchesEl.textContent = matchedCards;
                grid.innerHTML = '';

                // 创建卡片对
                const cardPairs = [...emojis, ...emojis];
                // 洗牌
                const shuffledCards = shuffle(cardPairs);

                // 创建卡片DOM元素
                shuffledCards.forEach((emoji, index) => {
                    const card = document.createElement('div');
                    card.classList.add('memory-card');
                    card.dataset.index = index;
                    card.dataset.emoji = emoji;
                    card.addEventListener('click', flipCard);
                    grid.appendChild(card);
                    cards.push(card);
                });
            }

            // 洗牌函数
            function shuffle(array) {
                let currentIndex = array.length;
                let temporaryValue, randomIndex;

                while (currentIndex !== 0) {
                    randomIndex = Math.floor(Math.random() * currentIndex);
                    currentIndex -= 1;

                    temporaryValue = array[currentIndex];
                    array[currentIndex] = array[randomIndex];
                    array[randomIndex] = temporaryValue;
                }

                return array;
            }

            // 翻卡操作
            function flipCard() {
                const card = this;

                // 如果卡片已经翻开或匹配，或者已经有两张卡片翻开，则不处理
                if (
                    card.classList.contains('flipped') ||
                    card.classList.contains('matched') ||
                    flippedCards.length >= 2
                ) {
                    return;
                }

                // 翻转卡片
                card.classList.add('flipped');
                card.textContent = card.dataset.emoji;
                flippedCards.push(card);

                // 如果翻开两张卡片，检查是否匹配
                if (flippedCards.length === 2) {
                    attempts++;
                    attemptsEl.textContent = attempts;

                    if (flippedCards[0].dataset.emoji === flippedCards[1].dataset.emoji) {
                        // 匹配成功
                        matchedCards++;
                        matchesEl.textContent = matchedCards;

                        flippedCards.forEach(card => {
                            card.classList.add('matched');
                        });

                        flippedCards = [];

                        // 检查是否完成所有匹配
                        if (matchedCards === emojis.length) {
                            setTimeout(() => {
                                alert(`恭喜你！你用了${attempts}次尝试完成了所有匹配！`);
                            }, 500);
                        }
                    } else {
                        // 不匹配，翻回来
                        setTimeout(() => {
                            flippedCards.forEach(card => {
                                card.classList.remove('flipped');
                                card.textContent = '';
                            });
                            flippedCards = [];
                        }, 1000);
                    }
                }
            }

            // 重新开始按钮
            restartBtn.addEventListener('click', initGame);

            // 初始化游戏
            initGame();
        });
    </script>
</body>
</html>
